<template>
  <div class="grades">
    <div class="header">
      <el-row style="margin-top: -20px">
        <el-col :span="6">
          <el-input
            placeholder="请输入科目编码"
            prefix-icon="el-icon-search"
            v-model="input1"
          >
          </el-input>
        </el-col>
        <el-col :span="2"><el-button type="primary">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="section">
      <el-table
        :data="manageList"
        border
        style="width: 100%"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        stripe
      >
        <el-table-column
          fixed
          width="150"
          v-for="item in infoList"
          :key="item.key"
          :label="item.label"
          :prop="item.key"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row)
    },
  },

  data() {
    return {
      infoList: [
        {
          label: '序号',
          key: 'serial',
        },
        {
          label: '学号',
          key: 'id',
        },
        {
          label: '姓名',
          key: 'name',
        },
        {
          label: '性别',
          key: 'sex',
        },
        {
          label: '出生日期',
          key: 'date',
        },
        {
          label: '年级',
          key: 'grade',
        },
        {
          label: '班级',
          key: 'class',
        },
        {
          label: '家庭住址',
          key: 'adress',
        },
        {
          label: '密码',
          key: 'psd',
        },
      ],
      manageList: [
        {
          serial: '111',
          id: 'admin',
          name: '谢文星',
          sex: '男',
          date: '1998-05-02',
          grade: '大三',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '123456',
        },
        {
          serial: '222',
          id: 'admin123',
          name: '谢文',
          sex: '男',
          date: '1989-05-02',
          grade: '研二',
          class: '软件工程2班',
          adress: '河南信阳',
          psd: '123',
        },
        {
          serial: '333',
          id: '123',
          name: '谢文星',
          sex: '男',
          date: '1999-12-02',
          grade: '大三',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '321',
        },
        {
          serial: '444',
          id: '12301',
          name: '谢文星',
          sex: '男',
          date: '1999-08-02',
          grade: '大四',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '79856',
        },
        {
          serial: '555',
          id: '1239895',
          name: '谢文星',
          sex: '男',
          date: '2000-12-02',
          grade: '大三',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '54856',
        },
        {
          serial: '555',
          id: '1239895',
          name: '谢文星',
          sex: '男',
          date: '2000-12-02',
          grade: '大三',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '54856',
        },
        {
          serial: '555',
          id: '1239895',
          name: '谢文星',
          sex: '男',
          date: '2000-12-02',
          grade: '大三',
          class: '软件工程3班',
          adress: '河南信阳',
          psd: '54856',
        },
      ],
      input1: '',
    }
  },
}
</script>

<style lang="less">
.grades {
  width: 100%;
  height: 100%;
  // background-color: aquamarine;
  .header {
    width: 100%;
    height: 120px;
    // background-color: blueviolet;
    overflow: hidden;
  }
  .footer {
    height: 200px;
    width: 100%;
    margin-top: 29px;
    position: relative;
  }
  .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    position: absolute;
    right: -10px;
  }
}
</style>
